<template>
    <div class="shopCard">
        <shopperCardHeader :info="info" />
      <div class="u-m-t-20">
        <p class="u-col-center"> <u-tag :text="getNewsInfo.tag"  class="u-m-r-10" type="warning" mode="dark" size="mini" />{{getNewsInfo.content}}</p>
        <div class="mediaBox u-flex u-flex-wrap u-m-t-10"  >
          <block v-for="(imgA,index) in getSwiperImgsList" class="item" :key="index" >

            <u-image class="u-m-5 previewImg" :src="imgA" width="33.3%"  height="225" @click="openSwiper(index)"></u-image>
          </block>
        </div>
      </div>

      <div class="u-flex u-row-between u-m-t-20">
          <span :style="{color:$u.color['tipsColor']}" class="u-font-xs">阅读{{getNewsInfo.read_num}} </span>
        <div class="u-font-xs u-m-r-30 ">
            <div>
              <u-icon name="thumb-up" color="#333" size="28"></u-icon>
              <span>点赞 {{getNewsInfo.praise_num}}</span>
            </div>
        </div>
      </div>
      <slot></slot>
      <div class="swiperModal" v-if="isOpenSwiper" >
        <u-icon name="close" color="#f5f5f5" size="38" class="closeBtn" @click="closeSwiper"></u-icon>
        <div class="head u-flex u-p-30">
          <u-avatar :src="getShopInfo.shop_logo"  :show-level="getShopInfo.shop_level>0" size="mini"></u-avatar>
          <div class="headTop u-m-l-15">
            <h4 class="u-line-2">{{getShopInfo.shop_name}}</h4>
            <p class="u-font-xs">{{getShopInfo.shop_desc}}</p>
          </div>
        </div>
        <swiper class="swiperWrap" :current="swiperCurrent" @change="swiperChange($event)">
          <swiper-item v-for="(item,index) in getSwiperImgsList" :key="index">
            <view class="swiper-item">
              <u-image :src="item" width="100%" height="900"></u-image>
            </view>
          </swiper-item>
        </swiper>
        <div class="swiperBottom u-flex u-row-between">
        <miniShopCard :shop="swiperCurrentItem"  />
          <div v-if="false">
            <u-icon name="thumb-up-fill" color="#fff" size="48" label="225" label-color="#fff" label-size="24" label-pos="bottom" margin-top="20"></u-icon>
          </div>
        </div>
      </div>


    </div>
</template>

<script>
import shopperCardHeader from "./shopperCardHeader";
import miniShopCard from "./miniShopCard";

export default {
  name: "shopperCard",
computed:{
    getNewsInfo(){
      return  this.info.news_info
    },
  getShopInfo(){
      return this.info.shop_info
  },
  getSwiperImgsList(){
      return this.getNewsInfo.resour_list.map(res=>res.goods_img)
  }
},
  data(){
    return{
      isOpenSwiper:false,
      swiperCurrentItem:{},
      swiperCurrent:0
    }
  },
  props:{
    info:{
      type:Object,
      default:()=>{{}}
    },

  },

  mounted() {

  },
  methods:{
    closeSwiper(){
      this.isOpenSwiper=false
      uni.showTabBar()

    },
    swiperChange(e){
        console.log(e)
      let index = e.detail.current

      this.$set(this,'swiperCurrentItem',this.getNewsInfo.resour_list[index])
    },
    openSwiper(index){
      this.isOpenSwiper=true
      this.swiperCurrent = index
      this.$set(this,'swiperCurrentItem',this.getNewsInfo.resour_list[index])
      uni.hideTabBar()
    },
    preView(list,index){
      uni.previewImage({
        urls: list,
        current:index,
        success:()=>{
    
        },
      complete:()=>{
      
      }
      })
    },
  },
  components:{
    shopperCardHeader,
    miniShopCard
  }
}
</script>

<style lang="scss" scoped>

.shopCard{
  background-color: #fff;
  margin:15upx;
  padding:20upx 14upx;
  border-radius: 20upx;
}
.mediaBox{
  border-radius: 14upx;
  overflow: hidden;
  .item{
    width: 32%;
  }
  .previewImg{
    &:nth-child(1){
      border-top-left-radius: 18upx!important;
      overflow: hidden!important;
    }
    &:last-child{
      border-bottom-right-radius: 18upx!important;
      overflow: hidden!important;
    }
  }
 

}

.bottomWrap{
  padding: 20upx 0;
  font-size: 24upx;
  color: #999;
}
.swiperModal{
  background-color: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99999;

}
.swiperWrap{

  height: 100%;
  width: 100%;
  margin-top: 100upx;
}
.head{
  color: #fff;
  margin-top: var(--status-bar-height);
}
.closeBtn{
  position: fixed;
  top: 60upx;
  /*  #ifdef  APP-PLUS */
  top: 140upx;
  /*  #endif  */

  right: 30upx;
}
.swiperBottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30upx;
}
</style>

